import { Menu, TreeSelect } from 'antd'
import Sider from 'antd/es/layout/Sider'
import React, { ReactNode } from 'react'
import { useNavigate } from 'react-router-dom';
import './index.css'
import { useDispatch } from 'react-redux';
import {setCheckedTab} from '../../stores/home';
import { List } from 'echarts';

interface VSiderProps {
  menuList: any;
  collapsed: boolean;

}


const VSider : React.FC<VSiderProps> = ({menuList,collapsed}) =>{
  const dispatch= useDispatch();
  const naviagte= useNavigate();
  const [value, setValue] = React.useState("");


  // 搜索栏
  const handleTreeSelectChange = (value:string,label:ReactNode[]) => {
    setValue(value);
    console.log(label);
    
    dispatch(setCheckedTab(label))
    naviagte(value);
  };
  
  return (
    <Sider 
    trigger={null} 
    collapsible 
    collapsed={collapsed}
    className='Vsider'
    width={"238px"}
    collapsedWidth={0}
    
    style={{overflow: 'auto',height: '100vh',position: "sticky", left: 0, top: 0, bottom: 0}}
    >
      <div className="demo-logo-vertical" >
      <TreeSelect
        
        placeholder={<>搜索菜单</>}
        showSearch
        style={{ width: '100%' }}
        dropdownStyle={{ maxHeight:380, overflow: 'auto' }}
       
        allowClear
        onChange={handleTreeSelectChange}
        // onSearch={(value) => console.log(value)}
        filterTreeNode={(inputValue:string, treeNode:any) =>
          // 解决中文搜索问题
          treeNode.title.indexOf(inputValue) !== -1
        }
        treeData={menuList}
      />
      </div>
      <Menu
        theme="dark"
        mode="inline"
        defaultSelectedKeys={['1']}
        items={menuList}
        onClick={({domEvent,key}) =>{
          dispatch(setCheckedTab(domEvent.currentTarget.innerText))
          naviagte(key);
        }}
        style={{fontSize: '16px'}}
      />
    </Sider>
  )
}
export default VSider;